<!-- /*
 * @Author: guoying 
 * @Date: 2021-08-22 16:07:37 
 * @Last Modified by:  gy
 * @Last Modified time: 2021-08-22 16:07:37 
 */ -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/fonts.css">
    <link rel="stylesheet" type="text/css" href="css/xiaomi.css">
</head>

<body>
    <div class="topBar">
        <div class="container">
            <div class="topBar_list">
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">MI</a>
                <span>|</span>
                <a href="#">loT</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">金融</a>
                <span>|</span>
                <a href="#">有品</a>
                <span>|</span>
                <a href="#">小爱开放平台</a>
                <span>|</span>
                <a href="#">企业团购</a>
                <span>|</span>
                <a href="#">资质证照</a>
                <span>|</span>
                <a href="#">协议规则</a>
                <span>|</span>
                <a href="#">下载app</a>
                <span>|</span>
                <a href="#">Select Location</a>
                <span>|</span>
            </div>
            <div class="shop">
                <a href="#">
                    <i class="iconfont" style="font-size: 14px;">&#xe603;</i> 购物车（0）
                </a>
            </div>
            <div class="login">
                <a href="#">登录</a>
                <span>|</span>
                <a href="#">注册</a>
                <span>|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="container">
            <div class="logo-container">
            <div class="site-logo">
                <a href="#">
                    <img src="images/mi-logo.png">
                </a>
            </div>
            </div>
            <div class="site-list">
                <ul class="clearfix">
                    <li class="site-category">
                        <div class="category-list">
                            <ul>
                                <li>
                                    <a href="#">手机 电话卡
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                    <div class="menu"></div>
                                </li>
                                <li>
                                    <a href="#">电视 盒子
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">笔记本 平板
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">家电 插线板
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">出行 穿戴
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">智能 路由器
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">电源 配件
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">健康 儿童
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">耳机 音箱
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">生活 箱包
                                        <span class="iconfont">&#xe64c;</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">小米手机</a>
                    </li>
                    <li>
                        <a href="#">电视</a>
                    </li>
                    <li>
                        <a href="#">笔记本</a>
                    </li>
                    <li>
                        <a href="#">家电</a>
                    </li>
                    <li>
                        <a href="#">路由器</a>
                    </li>
                    <li>
                        <a href="#">智能硬件</a>
                    </li>
                    <li>
                        <a href="#">服务</a>
                    </li>
                    <li>
                        <a href="#">社区</a>
                    </li>
                </ul>
            </div>
            <div class="site-search">
                <form name="#">
                    <input type="text" name="shop" class="search-text">
                    <input type="submit" class="search-btn iconfont" value="&#xe688;">
                    <div class="search-word">
                        <a href="#">小米9</a>
                        <a href="#">小米9 SE</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="site-content">
        <div class="container">
            <div class="site-slider">
                <a href="#">
                    <img src="images/小米手环.png">
                </a>
                <span class="next"></span>
                <span class="prev"></span>
                <div class="slider-item">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            <div class="content-sub">
                <div class="content-channel">
                    <ul class="channel-list clearfix">
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe601;</i> 米粉卡
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe62b;</i> 话费充值
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe60c;</i> F码
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe628;</i> 企业团购
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe604;</i> 以旧换新
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe61a;</i> 礼盒
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="content-list clearfix">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="images/mi1.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/mi2.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/mi3.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content-banner">
            <div class="container">
                <a href="#">
                    <img src="images/mi5.jpg">
                </a>
            </div>
        </div>
    </div>
    <div class="content-desc">
        <div class="container">
            <div class="box-hd">
                <h2>手机</h2>
                <div class="more">
                    <a href="#">
                        查看全部
                        <i class="iconfont">&#xe64c;</i>
                    </a>
                </div>
            </div>
            <div class="box-bd">
                <div class="content1 clearfix">
                    <div class="content1-l">
                        <a href="#">
                            <img src="images/iPhone1.jpg">
                        </a>
                    </div>
                    <div class="content1-r">
                        <ul>
                            <li>
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/figure1.jpg">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="#">
                                        小米10 青春版 5G
                                    </a>
                                </h3>
                                <p class="desc">
                                    50倍潜望式变焦/轻薄5G手机
                                </p>
                                <p class="price">
                                    <span class="num">2999</span>元
                                </p>
                                <div class="flag flagnew">
                                    新品
                                </div>
                            </li>
                            <li>
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/figure2.jpg">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="#">
                                        小米10
                                    </a>
                                </h3>
                                <p class="desc">
                                    晓龙865/1亿象素手机
                                </p>
                                <p class="price">
                                    <span class="num">3799</span>元
                                </p>
                                <div class="flag flagnew">
                                    新品
                                </div>
                            </li>
                            <li>
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/figure3.jpg">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="#">
                                        Redmi K30 Pro
                                    </a>
                                </h3>
                                <p class="desc">
                                    双模5G 晓龙865
                                </p>
                                <p class="price">
                                    <span class="num">2499</span>元
                                </p>
                                <div class="flag flagnew">
                                    新品
                                </div>
                            </li>
                            <li>
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/figure4.jpg">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="#">
                                        Redmi K30 Pro 变焦版
                                    </a>
                                </h3>
                                <p class="desc">
                                    双模5G 晓龙865
                                </p>
                                <p class="price">
                                    <span class="num">3799</span>元
                                </p>
                                <div class="flag flagnew">
                                    新品
                                </div>
                            </li>
                            <li>
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/figure5.jpg">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="#">
                                        小米10 Pro
                                    </a>
                                </h3>
                                <p class="desc">
                                    晓龙865/50倍变焦
                                </p>
                                <p class="price">
                                    <span class="num">4999</span>元
                                </p>
                                <div class="flag flagnew">
                                    新品
                                </div>
                            </li>
                            <li>
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/figure6.jpg">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="#">
                                        Redmi K30
                                    </a>
                                </h3>
                                <p class="desc">
                                    120Hz流速屏
                                </p>
                                <p class="price">
                                    <span class="num">1399</span>元
                                </p>
                                <div class="flag flagnew">
                                    新品
                                </div>
                            </li>
                            <li>
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/figure7.jpg">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="#">
                                        Redmi K30 5G
                                    </a>
                                </h3>
                                <p class="desc">
                                    双模5G 120Hz流速屏
                                </p>
                                <p class="price">
                                    <span class="num">1799</span>元
                                </p>
                                <div class="flag flagnew">
                                    新品
                                </div>
                            </li>
                            <li>
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/figure8.jpg">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="#">
                                        Redmi 8
                                    </a>
                                </h3>
                                <p class="desc">
                                    5000Am超长续航
                                </p>
                                <p class="price">
                                    <span class="num">799</span>元
                                </p>
                                <div class="flag flagnew">
                                    新品
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="home-banner-box">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88e35cffc82cd98cd53172460067af17.jpg?thumb=1&w=1533&h=150" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="footer-service">
                <ul class="clearfix">
                    <li class="first">
                        <a href="#">
                            <i class="iconfont">&#xe625;</i> 预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe600;</i> 7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe605;</i> 15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe61a;</i> 满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe602;</i> 520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-links clearfix">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>
                        <a href="#">账户管理</a>
                    </dd>
                    <dd>
                        <a href="#">购物指南</a>
                    </dd>
                    <dd>
                        <a href="#">订单操作</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd>
                        <a href="#">服务政策</a>
                    </dd>
                    <dd>
                        <a href="#">自动服务</a>
                    </dd>
                    <dd>
                        <a href="#">相关下载</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd>
                        <a href="#">小米之家</a>
                    </dd>
                    <dd>
                        <a href="#">服务网点</a>
                    </dd>
                    <dd>
                        <a href="#">授权体验店</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd>
                        <a href="#">了解小米</a>
                    </dd>
                    <dd>
                        <a href="#">加入小米</a>
                    </dd>
                    <dd>
                        <a href="#">投资者关系</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd>
                        <a href="#">新浪微博</a>
                    </dd>
                    <dd>
                        <a href="#">官方微信</a>
                    </dd>
                    <dd>
                        <a href="#">联系我们</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd>
                        <a href="#">F码通道</a>
                    </dd>
                    <dd>
                        <a href="#">礼物码</a>
                    </dd>
                    <dd>
                        <a href="#">防伪查询</a>
                    </dd>
                </dl>
                <div class="col-contact">
                    <p class="iphone">400-100-5678</p>
                    <p>周一到周日8:00-18:00<br> （仅收市话费）
                    </p>
                    <a href="#">
                        <i class="iconfont">&#xe66f;</i> 联系客服
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>